﻿@{
    ViewBag.Title = "FirstMap";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    .mapDiv {
        width: 500px; 
        height: 500px; 
        background-color: #ffffff;
        border: 1px solid #00BB00;
        float: left;
        margin: 20px;
    }
</style>

<h2>FirstMap Of OpenLayers</h2>

<script type="text/javascript" src="/JsLib/OpenLayers/OpenLayers.js"></script>

<script type="text/javascript">
    var map, layer;
    function init() {
        // map1
        map = new OpenLayers.Map('map');
        layer = new OpenLayers.Layer.OSM("Simple OSM Map");
        map.addLayer(layer);
        map.setCenter(
                new OpenLayers.LonLat(-0.122443, 51.53096).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 12
            );

        // map2
        map = new OpenLayers.Map('map2');
        layer = new OpenLayers.Layer.OSM("Simple OSM Map");
        map.addLayer(layer);
        map.setCenter(
                new OpenLayers.LonLat(-0.973828, 52.749594).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 6
            );
    }

    $(document).ready(function () {
        init();
    });
</script>

<br />
<h3>Path: @ViewBag.Path</h3>
<br />
<h3>using OpenStreetMap as datasource</h3>
<br />

<div style='width: 1100px; height: 500px;'>
    <div id='map' class="mapDiv"></div>
    <div id='map2' class="mapDiv"></div>
</div>




